<template>
  <swiper class="lbts" :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="(val, key) in imglist" :key = key>
      <img class="img" :src="val"/>
    </swiper-slide>
    <div  class="swiper-pagination" slot="pagination">
    </div>
  </swiper>
</template>

<script>
  export default {
    name: "slideshow",
    data() {
      return {
        paginationList: [1, 2, 3, 4, 5],
        imglist: [
          require('../../../assets/tlbt1.jpg'),
          require('../../../assets/tlbt2.jpg'),
          require('../../../assets/tlbt3.jpg'),
          require('../../../assets/tlbt4.jpg'),
          require('../../../assets/tlbt5.png')
        ],
        swiperOption: {
          preventLinksPropagation: false,
          loop:true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'bullets'
          }
        },
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      let pointer =this.swiper.pagination.bullets;
      for (let i = 0; i < pointer.length; i++) {
        pointer[i].style.display= 'none';

      }
      this.swiper.slideTo(1, 500, true);
    }
  }
</script>

<style scoped>
  .lbts{
    width: 100%;
    height: 100%;
  }
  swiper-slide{
    width: 690px;
    height: 250px;
  }
  .img{
    width: 100vw;
    height: 100%;
  }
</style>
